<template>
    <div class="contianer">
        <div class="video-box">
            <!-- <video :src="videoPath"
            controls autoplay ref="myVideo" ></video> -->
            <div id="dplayer" class="dplayer-hide-controller"></div>

        </div>
        <div class="playerstar" v-show="playerstarshow" @click="toPaly">
            <img src="../../../assets/Images/player_star.png">
        </div>
        <div class="btn-box" style="margin-top: 40px;">
            <van-button type="info" :disabled="isdisabled" @click="rebroadcast">重播</van-button>
            <van-button type="info" :disabled="isdisabled" @click="benext2">下一步</van-button>
        </div>
    </div>
</template>

<script>
import { getAxios3 } from "@/utils/request2";
import DPlayer from 'dplayer';
export default {
    data() {
        return {
            isdisabled: true, // 按钮是否禁用  记得改回去
            videoPath: '', //视频路径
            industryType: '', // 行业类型 
            fileId: '',
            isFinish: 0,  // 是否看完：0，未看完   1：看完
            userId: '',
            pdfPath: '',
            playerstarshow: true,
            isExamine: localStorage.getItem('isExamine'), //是否需要考试 1考 0不考
            title:this.$route.query.title
        }
    },
    created() {

    },
    mounted() {
        this.industryType = this.$route.query.industryType
        this.userId = localStorage.getItem('userId')
        this.getVideo()
        var that = this
        // this.$refs.myVideo.addEventListener('ended', function(e) {
        //     console.log('播放结束')
        //     that.isFinish = 1
        //     // 切换按钮禁用状态
        //     that.isdisabled = false
        // })
        that.dp = new DPlayer({
            container: document.getElementById("dplayer"), //播放器容器
            mutex: false, //  防止同时播放多个用户，在该用户开始播放时暂停其他用户
            theme: "#b7daff", // 风格颜色，例如播放条，音量条的颜色
            loop: false, // 是否自动循环
            lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
            screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
            hotkey: true, // 是否支持热键，调节音量，播放，暂停等
            preload: "auto", // 自动预加载
            volume: 0.7, // 初始化音量
            playbackSpeed: [1], //可选的播放速度，可自定义
            autoplay: true,
            video: {
                // url: 'http://qtyj.safetyhua.com//Uploads/00031/20230516/c84abf3c-df52-4f75-82c3-b590a276a817.mp4',
                // pic: 'hikarunara.png',
                // thumbnails: 'hikarunara_thumbnails.jpg'

            },
        })
        var videoTime = 0
        that.dp.on('timeupdate', function (e) {
            var videoCurrentTime = that.dp.video.currentTime;
            if (videoCurrentTime - videoTime > 0.5) {
                that.dp.seek(videoTime);
                // dp.notice('禁止快进',2000)
            }
            videoTime = videoCurrentTime;
        })
        that.dp.on('ended', function (e) {
            console.log('播放结束')
            that.isFinish = 1
            // 切换按钮禁用状态
            that.isdisabled = false
            that.saveStudy2()
        })
    },
    methods: {
        // 重播事件
        rebroadcast() {
            this.isdisabled = true
            this.dp.play()
        },
        // 播放按钮
        toPaly() {
            this.dp.play();
            this.playerstarshow = false
        },
        benext() {
            if (this.isExamine == 1) {
                const currentTime = this.dp.video.currentTime
                localStorage.setItem("currentTime", currentTime)
                localStorage.setItem("fileId", this.fileId)
                this.$router.push("/qtbm/StartExam?industryType=" + this.industryType);
            } else {
                //this.$router.push({path:'/qtbm/showPdfFile'})
                const currentTime = this.dp.video.currentTime
                const studyData = {
                    fileId: this.fileId,
                    userId: this.userId,
                    isFinish: this.isFinish,
                    industryType: this.industryType,
                    studyTimes: currentTime,
                    studyScore: ''
                }

                this.saveStudy(studyData)
            }
        },
        benext2(){
            this.$router.push({ path: '/qtbm/btnlist'})
            //   this.$router.push({ path: '/qtbm/detail', query: { itemCode:this.industryType, title:this.title } })
        },
        // 获取视频
        async getVideo() {
            // console.log(this.industryType)
            // const res = await this.$axios.get(`http://120.79.234.223:8558/system/content/detail?industryType=${this.industryType}`)
            let axios2 = await getAxios3()
            const res = await axios2.get(`https://qtbm.zatsafety.com/app/study/detail?industryType=${this.industryType}`)
            // const res = await axios2.get(`http://120.79.234.223:8558/app/study/safetyDetail?tipId=${this.industryType}`)
            console.log(res)
            this.fileId = res.data.fileId
            // this.videoPath = res.data.fileId.split(':=')[1]
            this.videoPath = res.data.fileId
            localStorage.setItem('videoPath', this.videoPath)
            this.dp.switchVideo({
                url: this.videoPath,
            });
        },
        // 保存学习进度
        async saveStudy(data) {
            let axios2 = await getAxios3()
            const res = await axios2.post('https://qtbm.zatsafety.com/app/study/saveStudyInfo', data)
            console.log(res)
            if (res.msg === "success") {
                let wordUrl = res.data.protocol
                localStorage.setItem('data', res.data)
                // this.$router.push({ path: '/qtbm/showPdfFile', query: { industryType: this.industryType, wordUrl } })
                this.$router.push({path: '/qtbm/btnList'})
            }
        },
        async saveStudy2() {
            const currentTime = this.dp.video.currentTime
                const data = {
                    fileId: this.fileId,
                    userId: this.userId,
                    isFinish: this.isFinish,
                    industryType: this.industryType,
                    studyTimes: currentTime,
                    studyScore: ''
                }

            let axios2 = await getAxios3()
            const res = await axios2.post('https://qtbm.zatsafety.com/app/study/saveStudyInfo', data)
            console.log(res)
            if (res.msg === "success") {
                let wordUrl = res.data.protocol
                localStorage.setItem('data', res.data)
                this.$toast("学习记录，保存完成！")
            
            }
        }
    }
}
</script>

<style lang="less" scoped>
.contianer {
    .video-box {
        width: 100%;
        height: 200px;
        border-bottom: 1px #cecece solid;
        padding-bottom: 20px;

        video {
            width: 100%;
        }
    }

    .btn-box {
        width: 70%;
        margin: 20px auto;
        display: flex;
        flex-direction: column;

        .van-button {
            margin-bottom: 10px;
        }
    }
}

.playerstar {
    position: absolute;
    top: 45px;
    width: 100%;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0);

    img {
        width: 60px;
        height: 60px;
    }
}
</style>